<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>日志查询系统</title>
    <!-- 引入 layui.css -->
    <!--<link href="//unpkg.com/layui@2.10.0/dist/css/layui.css" rel="stylesheet">-->
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <style>
        .main-container {
            padding: 15px;
        }

        .search-box {
            margin-bottom: 15px;
        }

        .log-content {
            background-color: #f8f8f8;
            padding: 10px;
            border: 1px solid #e6e6e6;
            height: calc(100vh - 280px);
            min-height: 400px;
            overflow-y: auto;
            font-family: Microsoft Yahei, Microsoft Yahei, 'Courier New', monospace; /* 修改字体 */
            white-space: pre-wrap;
            font-size: 14px;
            line-height: 1.5;
        }

        .layui-card {
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
        }

        .layui-card-header {
            font-weight: bold;
            color: #333;
            height: 130px;
            line-height: 52px;
        }

        .file-list-container {
            height: calc(100vh - 280px);
            min-height: 400px;
            overflow-y: auto;
        }

        .file-item {
            padding: 12px 15px;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
            transition: all 0.3s;
            margin-bottom: 5px;
            border-radius: 4px;
        }

        .file-item:hover {
            background-color: #f0faff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .file-item.active {
            background-color: #b8e0ff;
            border: 1px solid #91d5ff;
            box-shadow: none;
        }

        .layui-header {
            background-color: #23262E;
        }

        .layui-logo {
            color: #fff;
            font-size: 18px;
            font-weight: bold;
        }

        .highlight {
            background-color: #fff566;
            padding: 2px;
        }

        .status-bar {
            padding: 10px;
            background: #f8f8f8;
            border-top: 1px solid #e6e6e6;
            font-size: 12px;
            color: #666;
        }

        #refreshFileList {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative;
            z-index: 999;
        }

        .layui-col-md3 {
            width: 20%;
        }

        /* 匹配模式下拉框样式 */
        #matchMode {
            border-radius: 2px;
            border-color: #e6e6e6;
            transition: all 0.3s;
        }

        #matchMode:hover, #matchMode:focus {
            border-color: #00997a;
            box-shadow: 0 0 0 2px rgba(0, 153, 122, 0.2);
        }

        /* 匹配模式下拉框样式 */
        #matchMode02 {
            border-radius: 2px;
            border-color: #e6e6e6;
            transition: all 0.3s;
        }

        #matchMode02:hover, #matchMode02:focus {
            border-color: #00997a;
            box-shadow: 0 0 0 2px rgba(0, 153, 122, 0.2);
        }

        .layui-form-select dl dd.layui-this {
            background-color: #ffffff;
        }

        /* 调整表单项垂直对齐 */
        .layui-inline {
            vertical-align: middle;
        }

        /* 确保下拉菜单显示在正确位置 */
        .layui-form-select .layui-anim {
            z-index: 1000;
        }

        /* 确保提示框在顶层显示 */
        .layui-layer-tips {
            z-index: 19999 !important;
        }

        /* 优化匹配模式弹框定位 */
        .layui-layer-tips.matchmode-tip {
            margin-top: -5px !important;
        }

        .layui-layer-tips.matchmode-tip .layui-layer-content {
            background-color: #3595CC;
            padding: 10px 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            color: #fff;
            font-size: 13px;
        }

        .layui-layer-tips.matchmode-tip i.layui-layer-TipsT {
            border-right-color: #3595CC !important;
            margin-top: -1px !important;
        }

        /* 优化新布局样式 */
        .search-area {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        .search-area > div {
            margin-bottom: 0;
        }

        /* 响应式调整 */
        @media screen and (max-width: 1200px) {
            .search-area {
                flex-direction: column;
                align-items: flex-start;
            }

            .search-area > div {
                width: 100%;
                margin-right: 0;
                margin-bottom: 10px;
            }
        }

        .log-content {
            display: block;
            /*height: 100%;*/
            /*min-height: 200px; !* 确保有足够的高度来展示占位符 *!*/
        }

        .layui-icon-template-1 {
            display: flex;
            justify-content: center;
            /*align-items: center;*/
            /*text-align: center;*/
            /*  左偏移  */
            /*    margin-right: 10px;*/
        }

        .match-mode-tooltip {
            position: absolute;
            top: 100%; /* 根据需要调整 */
            left: 0; /* 根据需要调整 */
            transform: translateX(0); /* 新增属性，确保水平位置正确 */
            transform: translateY(0); /* 新增属性，确保垂直位置正确 */
        }

        /* 新增弹框相关样式 */
        .layui-layer-shade {
            background-color: rgba(0, 0, 0, .3);
        }

        #setUpModal {
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        }

        .config-form .layui-form-label {
            width: 150px;
            text-align: left;
            padding-left: 0;
        }

        .config-form .layui-input-block {
            margin-left: 180px;
        }

        .button-group {
            margin-top: 30px;
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo" style="">
            <i class="layui-icon layui-icon-console"></i> 日志查询系统
        </div>
    </div>

    <div class="main-container">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header"
                         style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 25px; background-color: #f8f8f8; border-bottom: 1px solid #e6e6e6;">
                        <div style="font-size: 20px; font-weight: bold; color: #333; margin-bottom: 5px; text-align: center;">
                            <i class="layui-icon layui-icon-folder"></i> 日志文件列表
                        </div>

                        <div style="display: flex; width: 100%; justify-content: space-between; align-items: center;">
                            <div class="layui-inline" style="width: 65%; margin-right: 10px;">
                                <div class="layui-input-block" style="margin-left: 0;">
                                    <input type="text" id="queryFileName" class="layui-input"
                                           placeholder="请输入搜索关键词">
                                </div>
                            </div>
                            <button class="layui-btn layui-btn-normal layui-btn-sm layui-anim" id="refreshFileList"
                                    style="background-color: #00997a">
                                <i class="layui-icon layui-icon-refresh"></i> 刷新列表
                            </button>
                        </div>
                    </div>
                    <div class="layui-card-body file-list-container">
                        <div id="logFileList"></div>
                    </div>
                    <!--  设置 - 左下方 -->
                    <div class="layui-card-header"
                         style="height: auto; display: flex; flex-direction: row; /* 改为水平布局 */
                         align-items: center; /* 垂直居中对齐 */
                         justify-content: space-between; /* 子元素两端对齐 */
                         background-color: #f8f8f8; border-bottom: 1px solid #e6e6e6; padding: 10px 15px;">
                        <button id="setUp" lay-on="tips-prompt"
                                style="border: none; background: transparent; text-align: left; font-size: 16px; font-weight: bold; color: #333; cursor: pointer;">
                            <i class="layui-icon layui-icon-set"></i> 设置
                        </button>
                        <button style="border: none; background: transparent; text-align: right; font-size: 14px; color: #00997a; cursor: default;">
                            <i class="layui-icon layui-icon-tips"></i> 当前文件根目录：<span id="currentRootDir"></span>
                        </button>
                    </div>

                </div>
            </div>
            <div class="layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="search-box">
                            <div class="layui-form">
                                <div class="layui-form-item layui-form-pane">
                                    <div class="layui-inline" style="width: 50%;">
                                        <label class="layui-form-label">当前文件</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="currentFile" class="layui-input" readonly>
                                        </div>
                                    </div>

                                    <!-- 重新排列搜索区域 -->
                                    <div class="layui-inline search-area"
                                         style="width: 100%; margin-top: 10px; display: flex; align-items: center;">
                                        <!-- 关键词 -->
                                        <div style="flex: 6; margin-right: 5px;">
                                            <label class="layui-form-label">关键词</label>
                                            <div class="layui-input-block">
                                                <input type="text" id="keyword" class="layui-input"
                                                       placeholder="请输入搜索关键词"
                                                       style="height:38px; padding:0 10px;"> <!-- 明确设置高度和内边距 -->
                                            </div>
                                        </div>

                                        <!-- 匹配模式 -->
                                        <div style="flex: 2; display: flex; align-items: center; margin-right: 5px;"
                                             id="matchModeContainer">
                                            <label class="layui-form-label"
                                                   style="width: auto; min-width: 70px;">匹配模式</label>
                                            <div class="layui-input-inline" style="width: 120px;">
                                                <select id="matchMode" lay-filter="matchMode" class="layui-select">
                                                    <option value="false">普通匹配</option>
                                                    <option value="true">正则匹配</option>
                                                </select>
                                            </div>
                                        </div>

                                        <!-- 自动切换文件开关 -->
                                        <div style="flex: 1.5; display: flex; align-items: center;">
                                            <label class="layui-form-label"
                                                   style="width: auto; min-width: 70px;">自动切换文件</label>
                                            <div class="layui-input-inline" style="width: 120px;">
                                                <select id="enableLoopSearch" lay-filter="enableLoopSearch"
                                                        class="layui-select">
                                                    <option value="false">关闭</option>
                                                    <option value="true">开启</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div style="float: right; margin-left: 10px;">
                                            <div style="flex: 1.5; display: flex; align-items: center;">
                                                <label class="layui-form-label"
                                                       style="width: auto; min-width: 70px;">一键复制</label>
                                                <div class="layui-input-inline" style="width: 120px;">
                                                    <select id="toggleCopyBtns" lay-filter="toggleCopyBtns"
                                                            class="layui-select">
                                                        <option value="false">关闭</option>
                                                        <option value="true">开启</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 按钮 -->
                                        <div style="flex: 1.5; display: flex; align-items: center;">
                                            <button class="layui-btn" id="searchBtn"
                                                    style="background-color: #00997a; margin-right: 5px;">
                                                <i class="layui-icon layui-icon-search"></i> 查询
                                            </button>
                                            <button class="layui-btn layui-btn-primary" id="clearBtn">
                                                <i class="layui-icon layui-icon-refresh"></i> 清空
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div id="searchProgress" style="display: none; margin: 10px 0;">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true"
                                         lay-filter="searchProgress">
                                        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <!-- 优化日志内容显示区域 -->
                        <pre id="logContent" class="log-content">
                        <div class="log-placeholder">
                            <i class="layui-icon layui-icon-template-1"> 请选择日志文件并输入关键词进行查询</i>
                        </div>
                        </pre>
                        <div class="status-bar">
                            <span id="searchStatus">准备就绪</span>
                            <span id="matchCount" class="match-count"></span>
                            <button id="copyLogBtn" class="layui-btn layui-btn-sm"
                                    style="float: right; margin-left: 10px;">
                                <i class="layui-icon layui-icon-copy"></i> 复制日志
                            </button>

                            <!-- 新增一键复制开关 -->
<!--                            <div style="float: right; margin-left: 10px;">-->
<!--                                <div style="flex: 1.5; display: flex; align-items: center;">-->
<!--                                    <label class="layui-form-label"-->
<!--                                           style="width: auto; min-width: 70px;">一键复制</label>-->
<!--                                    <div class="layui-input-inline" style="width: 120px;">-->
<!--                                        <select id="toggleCopyBtns" lay-filter="toggleCopyBtns"-->
<!--                                                class="layui-select">-->
<!--                                            <option value="false">关闭</option>-->
<!--                                            <option value="true">开启</option>-->
<!--                                        </select>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                    </div>
                    <!--                    <div class="layui-card-body">-->
                    <!--                        &lt;!&ndash; 优化日志内容显示区域 &ndash;&gt;-->
                    <!--                        <pre id="logContent" class="log-content">-->
                    <!--                            <div class="log-placeholder">-->
                    <!--                                <i class="layui-icon layui-icon-template-1">  请选择日志文件并输入关键词进行查询</i>-->
                    <!--                            </div>-->
                    <!--                        </pre>-->
                    <!--                        <div class="status-bar">-->
                    <!--                            <span id="searchStatus">准备就绪</span>-->
                    <!--                            <span id="matchCount" class="match-count"></span>-->
                    <!--                            <button id="copyLogBtn" class="layui-btn layui-btn-sm" style="float: right; margin-left: 10px;">-->
                    <!--                                <i class="layui-icon layui-icon-copy"></i> 复制日志-->
                    <!--                            </button>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
            </div>
        </div>
    </div>
</div>

<!--<script src="https://awp-assets.meituan.net/thh/thh_feb_web_portal/js/jquery-3.6.0.min.js"></script>-->
<!--<script src="//unpkg.com/layui@2.10.0/dist/layui.js"></script>-->
<script src="/static/layui/jquery-3.7.1.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/weblog.js"></script>
</body>
</html>


<!-- 设置弹框 -->
<!-- 设置弹窗模板 -->
<script type="text/html" id="setUpTpl">
    <div class="layui-form config-form" style="padding: 20px;">
        <!-- 文件根目录 -->
        <div class="layui-form-item">
            <label class="layui-form-label">当前文件根目录</label>
            <div class="layui-input-block">
                <select id="rootPathSelect" lay-filter="rootPathSelect" class="layui-select">
                    <!-- 选项动态加载 -->
                </select>
            </div>
        </div>

        <!-- 自动连续调用 -->
        <div class="layui-form-item">
            <label class="layui-form-label">自动调用接口</label>
            <div class="layui-input-block">
                <select id="enableAutoSearch" lay-filter="enableAutoSearch" class="layui-select">
                    <option value="false">关闭</option>
                    <option value="true">开启</option>
                </select>
            </div>
        </div>

        <!-- 新增最大调用次数配置项 -->
        <div class="layui-form-item">
            <label class="layui-form-label">最大连续调用次数</label>
            <div class="layui-input-block">
                <input type="number" id="maxAutoCalls" class="layui-input" min="1" max="100"
                       lay-verify="required|number" placeholder="请输入1-100的整数">
            </div>
        </div>
        <!-- 新增是否启用详细模式(换行日志、堆栈日志)配置项 -->
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用详细模式(换行日志、堆栈日志)</label>
            <div class="layui-input-block">
                <select id="whetherVerboseModeIsEnabled" lay-filter="whetherVerboseModeIsEnabled" class="layui-select">
                    <option value="false">关闭</option>
                    <option value="true">开启</option>
                </select>
            </div>
        </div>

        <!-- 按钮区域 -->
        <div class="layui-form-item">
            <div class="button-group">
                <button type="button" class="layui-btn layui-btn-primary" id="cancelConfigBtn">取消</button>
                <button type="button" class="layui-btn" id="saveConfigBtn" style="background-color: #00997a;">保存
                </button>
            </div>
        </div>
    </div>
</script>

<script>
    <!--    在JavaScript中，可以通过覆盖document.cookie的setter来防止新cookie的创建。 -->
    Object.defineProperty(document, 'cookie', {
        set: function () {
            console.log("Attempt to set cookie blocked.");
        }
    });
</script>
